const path = require("path");

const {
  override,
  addLessLoader, // 用于加载less文件
  overrideDevServer,
  fixBabelImports, 
  addPostcssPlugins, //修饰css文件的方法
  addDecoratorsLegacy, //修饰器 类组件使用高阶组件需要
  addWebpackAlias, //路径别名
} = require("customize-cra");
const SpritesmithPlugin = require("webpack-spritesmith");
/**
 * 雪碧图配置
 */
const spritesConfig = {
  src: {
    cwd: path.resolve(__dirname, "src/assets/icons"),
    glob: "*.png",
  },
  target: {
    image: path.resolve(__dirname, "src/assets/sprite.png"),
    css: path.resolve(__dirname, "src/assets/sprite.less"),
  },
  apiOptions: {
    cssImageRef: "sprite.png",
  },
};
function addProxy() {
  return (config) => {
    // 将配置好的config返回给customize-cra
    return {
      // 保证原有的config不受影响
      ...config,
      // 配置代理
      proxy: {
        // 拦截器（拦截所有以"/api"开头的http请求）
        "/api": {
          // 配置一个base url
          target: "http://data.fenotes.com",
          // 是否修改源，它决定我们是否跨域
          changeOrigin: true,
          // 是否重写我们的拦截关键字
          // 以下面这行为例，表示将请求url中的/api替换成空字符串
          pathRewrite: {
            "^/api": "",
          },
        },
      },
    };
  };
}
module.exports = {
  webpack: override(
    // 加载less文件
    addDecoratorsLegacy(),
    //别名
    addWebpackAlias({
      "@": path.resolve(__dirname, "src"),
    }),
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
      },
      sourceMap: true,
    }),
    // antd按需加载工具, 具体用法参考以下链接
    // https://github.com/ant-design/babel-plugin-import
    fixBabelImports("import", {
      libraryName: "antd", // ui库的名字 可选antd-mobile
      libraryDirectory: "es",
      style: true, // true表示使用less, 可选 css
    }),
    // addPostcssPlugins([
    //   require("postcss-px2rem-exclude")({
    //     remUnit: 75,
    //     exclude: /node_modules/i, // 表示忽略node_modules下的所有文件，避免影响第三方的设置比如antd
    //   }),
    // ]),

    (config) => {
      config.plugins.push(new SpritesmithPlugin(spritesConfig));
      return config;
    }
  ),

  devServer: overrideDevServer(addProxy()),
};
